<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test6</title>
		<style>
			body
			{
				background-color: black;
			}
			#div1
			{
				position: absolute;
				left: 250px;
				top: 250px;
				width: 300px;
				height: 300px;
			}

			#div2/*覆盖字的圆*/
			{
				position: absolute;
				z-index: 9;
				top: 50%;
				left: 50%;
				width: 0px;
				height: 0px;
				border-radius: 100%;
				background-color: aqua;
				transition: 2s;
			}
			#div1:hover #div2
			{
				left: 0%;
				top: 0%;
				height: 100%;
				width: 100%;
			}
			#div3/*进度条覆盖底板*/
			{
				position: absolute;
				z-index: 7;
				top: -51%;
				left: -51%;
				width: 202%;
				height: 202%;
				border-radius: 100%;
				background-color: black;
				transition: 2s;
			}
			#div1:hover #div3
			{
				top: -45%;
				left: -45%;
				width: 190%;
				height: 190%;
			}
			#div4/*右进度条*/
			{
				position: absolute;
				z-index: 2;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				border-radius: 100%;
				background-color: aqua;
				clip: rect(0px,600px,600px,300px);
			}
			#div5/*右挡板*/
			{
				position: absolute;
				z-index: 3;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				border-radius: 100%;
				background-color: black;
				transition: 2s;
				transition-delay: 2s;
				transition-timing-function: linear;
				clip: rect(0px,600px,600px,300px);
			}
			#div1:hover #div5
			{
				transform: rotate(180deg);
			}
			#div6/*左进度条*/
			{
				position: absolute;
				z-index: 4;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				border-radius: 100%;
				background-color: aqua;
				clip: rect(0px,300px,600px,0px);
			}
			#div7/*左挡板*/
			{
				position: absolute;
				z-index: 5;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background-color: black;
				transition: 2s;
				transition-delay: 4s;
				transition-timing-function: linear;
				clip: rect(0px,300px,600px,0px);
			}
			#div1:hover #div7
			{
				transform: rotate(180deg);
			}
			#div8/*右防挡进度条*/
			{
				position: absolute;
				z-index: 6;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				border-radius: 100%;
				background-color: transparent;
				clip: rect(0,600px,600px,300px);
				transition-delay: 4s;
			}
			#div1:hover #div8
			{
				background-color: aqua;
			}
			#div9
			{
				position: absolute;
				top: 110px;
				left: 10px;
				z-index: 10;
				font-size: 50px;
				color: aqua;
				transition: 2s;
			}
			#div1:hover #div9
			{
				color: transparent;
			}
			#div10
			{
				position: absolute;
				z-index: 11;
				top: 170px;
				left: 10px;
				height: 3px;
				width: 266px;
				background-color: aqua;
				transition: 2s;
			}
			#div1:hover #div10
			{
				left: 143px;
				width: 0px;
			}
		</style>
	</head>
	<body>
		<div id='div1'>
			<div id="div2"></div><!--覆盖字的圆-->
			<div id='div3'></div><!--进度条覆盖底板-->
			<div id='div4'></div><!--右进度条-->
			<div id='div5'></div><!--右挡板-->
			<div id='div6'></div><!--左进度条-->
			<div id='div7'></div><!--左挡板-->
			<div id='div8'></div><!--右防挡进度条-->
			<div id='div9'>hello world</div>
			<div id='div10'></div><!--下划线-->
		</div>
	</body>
</html>